﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/People.Master" Inherits="System.Web.Mvc.ViewPage<List<object>>" %>

<%@ Import Namespace="zeus.Web.Controllers" %>
<%@ Import Namespace="Webdiyer.WebControls.Mvc" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
      <table width="60%" border="0" cellspacing="2" cellpadding="2" class="datatable">
        
        <% foreach (var item in Model)
           {
                           
        %>
        <%--<tr style="display:none;">--%>
        <tr style="display:none;">
            <td id="dato">
                <%= Html.Encode(item) %>
            </td>
        </tr>
        <% } %>
    </table>
    
    
    <br />
    <br />
    <p>
        <a href='<%= ResolveUrl("~") %>People/PantallaPrincipal'>Eventos</a>
    </p>
   
    <iframe src="<%= ResolveUrl("~") %>People/Monitoreo" height="270px" width="100%" frameborder="0">
    </iframe>

    <br />

    <%--<iframe src="<%= ResolveUrl("~") %>People/MapaPeople" height="400px" width="100%">
    </iframe>--%>

    <div id="map_canvas" style="width: 100%; height: 422px">
    </div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server">
<script type="text/javascript">
        
        
   

    function initialize() {
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map_canvas"));
            map.setMapType(G_HYBRID_MAP);
            var baseIcon = new GIcon();
            baseIcon.iconSize = new GSize(32, 32);
            baseIcon.shadowSize = new GSize(56, 32);
            baseIcon.iconAnchor = new GPoint(16, 32);
            baseIcon.infoWindowAnchor = new GPoint(16, 0);
            var edificio = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal3/icon21.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon21s.png");
            var center = new GLatLng(-0.206212, -78.481501);
            map.setCenter(center, 18);
            var marker = new GMarker(center, edificio);
            map.setUIToDefault();
            map.enableRotation();
            var ovcontrol = new GOverviewMapControl(new GSize(200, 200));
            map.addControl(ovcontrol);
            GEvent.addListener(marker, "click", function () {
                marker.openInfoWindowHtml("<b style='color: #0000FF'>Startel Systems</b><br/><i>Pasaje Génova N24-531 y Rubio de Arévalo</i><br/><i>Telf: (+593) 2232189</i><br/><a href='http://www.startelsystems.com.ec'>Visitanos en nuestra Web!</a> ");
            });
            marker.openInfoWindowHtml("<b style='color: #0000FF'>Startel Systems</b><br/><i>Pasaje Génova N24-531 y Rubio de Arévalo</i><br/><i>Telf: (+593) 2232189</i><br/><a href='http://www.startelsystems.com.ec'>Visitanos en nuestra Web!</a> ");
            map.addOverlay(marker);
        }
    }

    

   

       

function initialize1() {

        //alert($("#dato").text());
        var id;
        id = $("#dato").text();

        //alert(id);
        $.ajax({
                url: '<%= ResolveUrl("~") %>People/MapaUbicacion',
                cache: false,
                data: 'id=' + id,
                type: 'POST',
                success: function (data) {

//                    alert(data);
                    
                   

                    var cadena = data.split(",");

//                    var j = 0;
//                    for(j = 0; j < cadena.length; j++){
//                        alert(cadena[j]);
//                        }


//                        alert(cadena[0]);
                        
                        var latitud=cadena[0].substring(1,13);



//                        alert(latitud);

                        var longitud=cadena[1];

//                        alert(longitud);

                    if (GBrowserIsCompatible()) {
                        var map = new GMap2(document.getElementById("map_canvas"));
                        map.setMapType(G_HYBRID_MAP);
                        map.addMapType(G_SATELLITE_3D_MAP);
                        geocoder = new GClientGeocoder();

                        var baseIcon = new GIcon();
                        baseIcon.iconSize = new GSize(32, 32);
                        baseIcon.shadowSize = new GSize(56, 32);
                        baseIcon.iconAnchor = new GPoint(16, 32);
                        baseIcon.infoWindowAnchor = new GPoint(16, 0);


                        var flecha = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal2/icon14.png", null, "http://maps.google.com/mapfiles/kml/pal2/icon14s.png");
                         

                        var center = new GLatLng(latitud, longitud);
                        map.setCenter(center, 18);
                        var marker = new GMarker(center,flecha);
                        map.setUIToDefault();
                        map.enableRotation();
                        map.addControl(new GNavLabelControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(0, 0)));
                        map.addOverlay(marker);
                       


                        marker.openInfoWindowHtml("<b style='color: #0000FF'>ULTIMA UBICACION VALIDA</b><br/><b>Alias: </b><i>" + cadena[3] + "</i><br/><b>Evento: </b><i>" + cadena[8] + "</i><br/><b>Fecha/Hora: </b><i>" + cadena[2] + "</i>");
                        GEvent.addListener(marker, "click", function () {
                            marker.openInfoWindowHtml("<b style='color: #0000FF'>ULTIMA UBICACION VALIDA</b><br/><b>Alias: </b><i>" + cadena[3] + "</i><br/><b>Evento: </b><i>" + cadena[8] + "</i><br/><b>Fecha/Hora: </b><i>" + cadena[2] + "</i>");
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $("#error").html(XMLHttpRequest.responseText);
                }
            });

    }

    $(window).load(function () {
       
        var id;
        id = $("#dato").text();

       if (id!="")
       {
            //alert("no null");
            initialize1();
       }
       else
       {
        
        //alert("null");
        initialize();
       } 
       

    });

    $(window).unload(function () {
        GUnload();
    });


</script>
</asp:Content>